<%--
  Created by IntelliJ IDEA.
  User: 陈fairy
  Date: 2018-12-18
  Time: 15:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>零件进货</title>
    <jsp:include page="${pageContext.request.contextPath}/common/common.jsp"/>
    <!--启用较验-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrapvalidator/bootstrapValidator.min.css">
    <script src="${pageContext.request.contextPath}/static/bootstrapvalidator/bootstrapValidator.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/bootstrapvalidator/zh_CN.js"></script>
    <!--sweet提示框-->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/hplus/css/plugins/sweetalert/sweetalert.css" />
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/hplus/js/plugins/sweetalert/sweetalert.min.js"></script>

    <script>

        $(function () {
            $("#usertb").bootstrapTable({
                url:'${pageContext.request.contextPath}/purchase/querypu',
                toolbar:'#dtn',//工具按钮用哪个容器
                striped: true,//隔行换色
                showRefresh: true,//是否显示刷新按钮
                height: 500,//行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "id",//每一行的唯一标识，一般为主键列
                showToggle:true,//是否显示详细视图和列表视图的切换按钮
                //detailView:true,//是否显示父子表
                pagination:true, //是否显示分页（*）
                pageSize : 4,//单页记录数
                pageList : [ 5, 10, 20, 30 ],//可选择单页记录数
                /* sidePagination:"server",//分页方式：client客户端分页，server服务端分页（*）
                 queryParams: function (params) {
                 var temp = {
                     limit : params.limit,
                     offset : params.offset
                 }
                 return temp;
                 },*/
                columns:[
                    {checkbox: true},
                    {field: 'id', title: '编号'},
                    {field: 'name', title: '名称'},
                    {field: 'price', title: '进价'},
                    {field: 'count', title: '数量'},
                    {field: 'date', title: '进货时间'},
                    {field: 'supplier2.name', title: '供货商'},
                    {field: 'userInfo.workname', title: '处理人'},
                    {field: 'note', title: '备注'},
                    {
                        title:'操作',
                        formatter:function(value,row,index){
                            return "<button class='btn  btn-primary' onclick='toxiugai(("+index+"))'><span class='glyphicon glyphicon-pencil'></span>&nbsp;修改</button>"
                        }
                    },
                ]
            });
        });

//打开添加对话框
        function toadd() {
            xiala1();
            xiala2();
            //清空文本框
            $("#addform [name='name']").val("");
            $("#addform [name='price']").val("");
            $("#addform [name='count']").val("");
            $("#addform [name='date']").val("");
            $("#addform [name='supplier']").val("");
            $("#addform [name='staff']").val("");
            $("#addform [name='note']").val("");
            $("#addmodal").modal("show");

        }

        $(function () {
            <!--校验框架-->
            $('#addmodal').bootstrapValidator({
                message: 'This value is not valid',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields:{
                                supplier:{
                                    message: 'The name is not valid',
                                    validators:{
                                        notEmpty:{//检测非空，radio也可用
                                            message:'文本框必须输入'
                                        },
                                    }
                                },
                            }
                        });
                    });
        //进行增加用户
        function doAdd(){
            //启用校验
            $('#addmodal').data('bootstrapValidator').validate();
            //验证是否通过true/false
            var flag=$('#addmodal').data("bootstrapValidator").isValid();
            if(flag){
                //绑定当前页开始
                var options=$('#usertb').bootstrapTable('getOptions');//返回表格的 Options
                //得到当前页
                var pn=options.pageNumber;
                $("input[name='pn']").val(pn);
                //序列化表单
                var formStr=$('#userform').serialize();
                //处理表单控件的中文乱码
                addsave=decodeURIComponent(formStr,true);
                alert(addsave)
                // send ajax
                $.ajax({
                    'url':'/purchase/save',
                    'type':'post',
                    'data':addsave,
                    success:function(data){
                        //关闭对话框
                        $("#addmodal").modal('hide');
                        //重新加载表格
                        $("#usertb").bootstrapTable('load',data);
                        //提高增加成功
                        swal("提示信息","增加成功！","success");
                    }
                });
           }
        };


        function xiala1() {
            var i = 0;
            //打开一个对话框
            $("#addmodal").modal("show");
            //当对话框加载完成后，绑定年有角色
            $.post('${pageContext.request.contextPath}/supplier/cha',function(data){
                var s = "" ;
                $.each(data,function (index,item) {
                    s = s + "<option value="+item.id+">"+item.name+"</option>";
                    console.log(item.name);
                })
                $("select[name='supplier']").html(s) ;
            }) ;

        }
        function xiala2() {
            var i = 0;
            //打开一个对话框
            $("#addmodal").modal("show");
            //当对话框加载完成后，绑定年有角色
            $.post('${pageContext.request.contextPath}/user/queryuser',function(data){
                var s = "" ;
                $.each(data,function (index,item) {
                    s = s + "<option value="+item.id+">"+item.workname+"</option>";
                    console.log(item.workname);
                })
                $("select[name='staff']").html(s) ;
            }) ;

        }

        //删除做完
        function todel() {
            var ids = "" ;
            //1.得到要删除的行
            //返回所选的行，当没有选择任何行的时候返回一个空数组。
            var rows = $("#usertb").bootstrapTable("getSelections") ;
            if (rows.length==0){
                alert("请选择要删除的数据！") ;
            }
            else{
                $.each(rows,function (index,row) {
                    ids = ids + row.id + "-" ;
                }) ;

                swal({
                    title: "您确定要删除这条信息吗",
                    text: "删除后将无法恢复，请谨慎操作！",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "删除",
                    closeOnConfirm: false
                }, function () {
                    //得到当前页
                    //绑定当前页开始
                    var options = $("#usertb").bootstrapTable('getOptions') ;
                    //得到当前页
                    var pn = options.pageNumber ;
                    $.post("/purchase/del",{'ids': ids,'pn':pn},function(data){
                        //友好的提示
                        swal("删除成功！", "您已经永久删除了这条信息。", "success");
                        //刷新表格
                        $("#usertb").bootstrapTable('load',data) ;
                    })
                });
            }
        };
        //打开修改对话框,回传要修改行的数据
        function toxiugai(index) {
            //取消所有选择
            $("#tb").bootstrapTable("uncheckAll");
            //选中要修改的行
            $("#usertb").bootstrapTable("check", index);

            //得到所选行的数据
            var row = $("#usertb").bootstrapTable("getSelections")[0];
            //绑定主键
            $("input[name='id']").val(row.id);
            //绑定当前页开始
            var options = $("#usertb").bootstrapTable('getOptions') ;
            //得到当前页
            var pn = options.pageNumber ;
            //绑定当前
            $("input[name='pn']").val(pn) ;
            $("input[name='name']").val(row.name);
            $("input[name='price']").val(row.price);
            $("input[name='count']").val(row.count);
            $("input[name='date']").val(row.date);
            $("[name='supplier']").val(row.supplier);
            $("[name='staff']").val(row.staff);
            $("input[name='note']").val(row.note);


            $("#supplier option").remove();
            //.打开对话框
            $("#toxiugaimodal").modal("show");
            $.post("${pageContext.request.contextPath}/supplier/cha",{"uid":row.id},function (data) {
                $.each(data,function (index,item) {
                    $("#supplier1").append('<option value='+item.id+'>'+item.name+'</option>');
                });
                if (data.role!=null){
                    $("#supplier1").val(data.role.id);
                }
                $("[name=uid]").val(id);
            });

            $("#staff option").remove();
            $.post("${pageContext.request.contextPath}/user/queryuser",{"uid":row.id},function (data) {
                $.each(data,function (index,item) {
                    $("#staff1").append('<option value='+item.id+'>'+item.workname+'</option>');
                });
                if (data.role!=null){
                    $("#staff1").val(data.role.id);
                }
                $("[name=uid]").val(id);
            });
            $('#date').datetimepicker2({
                format: 'YYYY-MM-DD'
            });
        }
        function doxiugai(){
            //.
            var params = $("#userxiugaiform").serialize();
            var rid = $("#supplier1 ").val();
            var rid =$("#staff1").val();
            //处理表单控件的中文乱码
            upPurchase = decodeURIComponent(params,true);
            alert(upPurchase)
            $.ajax({
                'type':'post',
                'url':'/purchase/upPurchase',
                'data':upPurchase,
                success:function(data){
                    //关闭对话框
                    $("#toxiugaimodal").modal('hide') ;
                    //友好的提示
                    swal("提示信息", "修改成功!", "success");
                    //重新加载表格
                    $("#usertb").bootstrapTable('load',data) ;

                }
            })
        }
    </script>
</head>
<body>
<div class="container">
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">零件进货</h3>
    </div>
    <div class="panel-body">
        <div class="row">
            <div class="col-sm-6">
                <button onclick="toadd()" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;增加</button>
                <button onclick="todel()" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;删除</button>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <table id="usertb"></table>
            </div>
        </div>

    </div>
</div>
<%--添加模态框--%>
<div class="modal inmodal" id="addmodal">
    <div class="modal-dialog">
        <form class="form-horizontal" id="userform" method="post" role="form">
            <input type="hidden" name="pn">
            <div class="modal-content animated bounceInLeft">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" >
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">零件增加</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-4 text-right">零件名称：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="name" placeholder="零件进价"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 text-right">零件进价：</label>
                        <div class="col-sm-6">
                                <input type="text" class="form-control" name="price" placeholder="零件进价"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 text-right">零件数量：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="count" placeholder="零件数量"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 text-right">进货时间：</label>
                        <div class="col-sm-6">
                            <div class="input-group" id="datetimepicker2">
                                <input name="date" id="date" type='date' class="form-control" />
                                <span class="input-group-addon" ><span class="glyphicon glyphicon-calendar"></span></span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 text-right">供货商：</label>
                        <div class="col-sm-6">
                            <select name="supplier" id="supplier"></select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 text-right">处理人：</label>
                        <div class="col-sm-6">
                            <select name="staff" id="staff"></select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 text-right">备注：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="note" placeholder="备注"/>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="doAdd()">添加</button>
                </div>
            </div>
        </form>
    </div>
</div>
    <!--修改模态框-->
    <div  class="modal inmodal" id="toxiugaimodal">
        <div class="modal-dialog">
            <form class="form-horizontal" id="userxiugaiform"  method="post" role="form">

                <input type="hidden" name="id">
                <input type="hidden" name="pn">
                <div class="modal-content animated bounceInLeft">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title">用户修改</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="col-sm-4 text-right" for="name">零件名称</label>
                            <div class="col-sm-6" style="margin-left: -13px" >
                                <input type="text" class="form-control" name="name"  placeholder="零件名称" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 text-right" for="price">零件进价</label>
                            <div class="col-sm-6" style="margin-left: -13px" >
                                <input type="text" class="form-control" name="price"  placeholder="零件进价" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 text-right" for="count">零件数量</label>
                            <div class="col-sm-6" style="margin-left: -13px" >
                                <input type="text" class="form-control" name="count"  placeholder="零件数量"  />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="date" class="col-sm-4 text-right">日期</label>
                            <div class="input-group col-sm-6" id="datetimepicker2" >
                                <input name="date" id="date" type='date' class="form-control" />
                                <span class="input-group-addon" ><span class="glyphicon glyphicon-calendar"></span></span>
                            </div>
                        </div>

                        <div class="form-group" >
                            <label for="supplier" class="col-sm-4 text-right">供用商</label>
                            <div class="col-sm-6" style="margin-left: -14px">
                                <select name="supplier" id="supplier1" class="form-control">

                                </select>
                            </div>
                            <input type="hidden" name="uid" value="-1">
                        </div>
                        <div class="form-group" >
                            <label for="staff" class="col-sm-4 text-right">处理人</label>
                            <div class="col-sm-6" style="margin-left: -14px">
                                <select name="staff" id="staff1" class="form-control">
                                </select>
                            </div>
                            <input type="hidden" name="uid" value="-1">
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 text-right" for="note">备注</label>
                            <div class="col-sm-6" style="margin-left: -13px" >
                                <input type="text" class="form-control" name="note"  placeholder="零件数量" />
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                            <button onclick="doxiugai()" type="button" class="btn btn-primary">修改</button>
                        </div>
                    </div>
                    </div>
</body>
</html>
